<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p>
    <textarea cols="50" rows="7" id="text"></textarea>
    <script type="text/javascript">
        //补充代码

        var text = document.getElementById("text");
        var b = document.getElementsByTagName("b")[0];
        var sp = document.getElementsByTagName("span")[0];
        var total = b.innerHTML;
        document.onkeyup = function () {
            if (text.value.length <= total) {
                b.innerHTML = total - text.value.length;
            } else {
                sp.innerHTML = "您已超出" + (text.value.length - total) + "个字";
            }

        }
    </script>
</body>

</html>